import React, { useEffect, useRef } from "react"

import * as echarts from "echarts"

// 引入柱状图
// import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';


interface BarChartProps {
    title: {};
    tooltip: {};
    legend: {};
    //直角坐标系内绘图网格,可以配置grid组件和父容器之间的距离
    grid: {};
    xAxis: {}[];
    yAxis: {}[];
    series: {}[];
    width: number;
    height: number;

}

export default function BarChart(props: BarChartProps) {

    const div = useRef();
    const widthval = props.width;
    const heightval = props.height;

    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(div.current);
        // 绘制图表
        myChart.setOption({
            title: props.title,
            legend: props.legend,
            tooltip: props.tooltip,
            xAxis: props.xAxis,
            yAxis: props.yAxis,
            series: props.series
        });
    }, []);

    return <>
        <div ref={div} style={{ width: widthval, height: heightval }}></div>
    </>

}

